<template>
  <div class="home-container">
    <h1>欢迎使用ERP系统</h1>
    <div class="dashboard">
      <div class="card">
        <h3>财务管理</h3>
        <p>管理凭证、账簿和财务报表</p>
        <router-link to="/finance/vouchers" class="card-link">进入财务管理</router-link>
      </div>
      
      <div class="card">
        <h3>生产管理</h3>
        <p>管理生产订单、物料清单和生产计划</p>
        <router-link to="/production/orders" class="card-link">进入生产管理</router-link>
      </div>
      
      <div class="card">
        <h3>供应链管理</h3>
        <p>管理供应商、采购订单和库存</p>
        <router-link to="/supply" class="card-link">进入供应链管理</router-link>
      </div>
      
      <div class="card">
        <h3>人力资源</h3>
        <p>管理员工信息、考勤和薪资</p>
        <router-link to="/hr" class="card-link">进入人力资源管理</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.home-container {
  padding: 2rem;
}

.home-container h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card h3 {
  margin-top: 0;
  color: #333;
}

.card p {
  color: #666;
  margin-bottom: 1rem;
}

.card-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.card-link:hover {
  background-color: #0056b3;
}
</style>